<template>
    <n-drawer v-model:show="isDrawer" width="650" :auto-focus="false" @after-leave="handleReset">
      <n-drawer-content title="充值方案" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="充值金额" path="czmoney">
            <n-input
              placeholder="请输入充值金额"
              v-model:value="formParams.czmoney"
            />
          </n-form-item>
          <n-form-item label="赠送金额" path="zsmoney">
            <n-input placeholder="请输入赠送金额" v-model:value="formParams.zsmoney" />
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space>
            <n-button @click="handleReset">重置</n-button>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </template>
  
  <script lang="ts" setup>
    import { ref } from 'vue';
    import { useMessage, FormRules } from 'naive-ui';
    import { rechargeInfo,rechargeAdd,rechargeEdit } from '@/api/rechargeplan/index';

    const rules: FormRules = {
      czmoney: {
        required: true,
        message: '充值金额不能为空',
        trigger: 'blur',
      }
    };

    const defaultValueRef = () => ({
      id: null,
      czmoney: '',
      zsmoney: '',
    });
  
    const message = useMessage();
    const formRef: any = ref(null);
    const isDrawer = ref(false);
    const subLoading = ref(false);
    const formParams = ref(defaultValueRef());
    const emit = defineEmits(['change']);

    async function openDrawer(id?) {
      if (id) {
        formParams.value.id = id;
        getInfo();
        return;
      }
      isDrawer.value = true;
    }
  
    function closeDrawer() {
      isDrawer.value = false;
    }
  
    function formSubmit() {
      formRef.value.validate((errors) => {
        if (!errors) {
          const msg = formParams.value.id ? '编辑成功' : '添加成功';
          if (formParams.value.id) {
            rechargeEdit(formParams.value).then((_) => {
              message.success(msg);
              emit('change');
              handleReset();
              closeDrawer();
            });
          } else {
            rechargeAdd(formParams.value).then((_) => {
              message.success(msg);
              emit('change');
              handleReset();
              closeDrawer();
            });
          }
        } else {
          message.error('请填写完整信息');
        }
      });
    }
  
    function handleReset() {
      formRef.value.restoreValidation();
      formParams.value = Object.assign(formParams.value, defaultValueRef());
    }
  
    function getInfo() {
      rechargeInfo({ id: formParams.value.id }).then((res) => {
        const params = {
          id: formParams.value.id,
          zsmoney: res.zsmoney,
          czmoney: res.czmoney,
        };
  
        formParams.value = Object.assign(formParams.value, params);
        isDrawer.value = true;
      });
    }
  
    defineExpose({
      openDrawer,
      closeDrawer,
    });
  </script>
  